<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<div id="resourceContainer" class="page-box">
    <el-row>
        <el-col :md="6" >
            <el-tree :data="treeResources" :props="treeProps" :default-expanded-keys="treeDefaultKeys"
              :highlight-current="true" :current-node-key="treeCurrentKey"  :expand-on-click-node="true" @node-expand="treeNodeExpand" 
            :node-key="treeKeyField" style="width: 98%;" :style="{height:treeHeight+'px'}"  @node-click="treeNodeClick"></el-tree>
        </el-col>
        <el-col :md="18">
            <el-row class="qry-box">
               <el-form :inline="true" :model="qryForm" onsubmit="return false">
			      <el-form-item>
			          <el-button type="text" icon="plus" @click="openAddPage(1,$event)">新增</el-button>
			      </el-form-item>
<!-- 				  <el-form-item label="资源名称："> -->
<!-- 				    <el-input v-model="qryForm.name" placeholder="请输入资源名称"></el-input> -->
<!-- 				  </el-form-item> -->
<!-- 				  <el-form-item> -->
<!-- 				    <el-button type="primary" icon="search" @click="qry" :loading="loading">查询</el-button> -->
<!-- 				  </el-form-item> -->
				</el-form>
            </el-row>
            <el-row class="table-box">
	            <el-table :data="tableResource" border="true" stripe="true"  style="width: 100%" :height="tableHeight"  :loading="loading" :element-loading-text="loadingTxt">
				    <el-table-column prop="name" label="资源名称" width="150"></el-table-column>
				    <el-table-column prop="typeName" label="资源类型" width="100"></el-table-column>
				    <el-table-column prop="identify" label="资源标识" width="100"></el-table-column>
				    <el-table-column prop="url" label="资源地址" width="150"></el-table-column>
				    <el-table-column prop="useStatusName" label="状态" width="100">
				        <template scope="scope">
				             <div v-if="scope.row.useStatus == 1 ">
					             <el-tooltip content="点击可以停用资源">
					                <el-button type="success" size="small" @click="onUsableResource(scope.row.useStatus,scope.row.id)"><i class="fa fa-play"></i>启用</el-button>
					             </el-tooltip>
				             </div>
				             <div v-else-if="scope.row.useStatus == 0 ">
					             <el-tooltip content="点击可以启用资源">
					                <el-button type="danger" size="small" @click="onUsableResource(scope.row.useStatus,scope.row.id)"><i class="fa fa-stop"></i>停用</el-button>
					      		 </el-tooltip>
					         </div>
				        </template>
				    </el-table-column>
				    <el-table-column label="操作" min-width="180">
				        <template scope="scope">
					        <el-button type="primary" icon="edit" size="small" @click="openAddPage(2,$event)" :resourceId="scope.row.id">修改</el-button>
					        <el-button type="warning" icon="delete" size="small" @click="del"  :resourceId="scope.row.id">删除</el-button>
				        </template>
				    </el-table-column>
				  </el-table>
			  </el-row>
        </el-col>
    </el-row>
    <jsp:include page="addResource.jsp"></jsp:include>
</div>
<script type="text/javascript" src="${ctx }/static/sys/admin/resource/fontAwesomeIcon.js"></script>
<script type="text/javascript" src="${ctx }/static/sys/admin/resource/resourceList.js"></script>